<template>
	<view>
		<view class="search">

			<view class="search-box">
				<input class="search-ipt" type="text" value="" placeholder="搜索旅游地" />
			</view>
			<image @tap="jumprecommend" class="search-img" src="../../static/images/card-shouye/all%20(1).png" mode="">
			</image>
		</view>
		<view class="load-box">
			<view class="load-list">
				<view class="load-list-item" @click="curId = 0" :class="{on: curId == 0}">
					<text class="load-list-list">攻略</text>
				</view>
				<view class="load-list-item" @click="curId = 1" :class="{on: curId == 1}">
					<text class="load-list-list">游记</text>
				</view>
				<view class="load-list-item" @click="curId = 2" :class="{on: curId == 2}">
					<text class="load-list-list">专栏</text>
				</view>
				<view class="load-list-item" @click="curId = 3" :class="{on: curId == 3}">
					<text class="load-list-list">问答</text>
				</view>
			</view>
			<view class="load-show">
				<view class="load-show-iitem" v-show="curId == 0">
					<gonglue/>

				</view>
				<view v-show="curId == 1">
					<text class="title">欧洲游</text>
				</view>
				<view v-show="curId == 2">
					<text class="title">北美洲游</text>
				</view>
				<view v-show="curId == 3">
					<text class="title">问答</text>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curId: 0,
				recommend: [{
						name: "普吉岛",
						url: "https://636c-cloud1-9g758w5e086d6c42-1308394358.tcb.qcloud.la/card/carshouye/02.png?sign=7c120fb70a15ada43db3b8f30f121db9&t=1637725999"

					},
					{
						name: "济州岛",
						url: "https://636c-cloud1-9g758w5e086d6c42-1308394358.tcb.qcloud.la/card/carshouye/03.png?sign=131bcc020e5be87c6eca3388b62c9220&t=1637738230"

					},
					{
						name: "马尔代夫",
						url: "cloud://cloud1-9g758w5e086d6c42.636c-cloud1-9g758w5e086d6c42-1308394358/card/carshouye/image_u307.png"

					},
					{
						name: "马尔代夫",
						url: "https://636c-cloud1-9g758w5e086d6c42-1308394358.tcb.qcloud.la/card/carshouye/02.png?sign=7c120fb70a15ada43db3b8f30f121db9&t=1637725999"

					},
					{
						name: "普吉岛",
						url: "https://636c-cloud1-9g758w5e086d6c42-1308394358.tcb.qcloud.la/card/carshouye/02.png?sign=7c120fb70a15ada43db3b8f30f121db9&t=1637725999"

					},
					{
						name: "济州岛",
						url: "https://636c-cloud1-9g758w5e086d6c42-1308394358.tcb.qcloud.la/card/carshouye/03.png?sign=131bcc020e5be87c6eca3388b62c9220&t=1637738230"

					},
					{
						name: "马尔代夫",
						url: "cloud://cloud1-9g758w5e086d6c42.636c-cloud1-9g758w5e086d6c42-1308394358/card/carshouye/image_u307.png"

					},
					{
						name: "马尔代夫",
						url: "https://636c-cloud1-9g758w5e086d6c42-1308394358.tcb.qcloud.la/card/carshouye/02.png?sign=7c120fb70a15ada43db3b8f30f121db9&t=1637725999"

					},
					{
						name: "普吉岛",
						url: "https://636c-cloud1-9g758w5e086d6c42-1308394358.tcb.qcloud.la/card/carshouye/02.png?sign=7c120fb70a15ada43db3b8f30f121db9&t=1637725999"

					},
					{
						name: "济州岛",
						url: "https://636c-cloud1-9g758w5e086d6c42-1308394358.tcb.qcloud.la/card/carshouye/03.png?sign=131bcc020e5be87c6eca3388b62c9220&t=1637738230"

					},
					{
						name: "马尔代夫",
						url: "cloud://cloud1-9g758w5e086d6c42.636c-cloud1-9g758w5e086d6c42-1308394358/card/carshouye/image_u307.png"

					},
					{
						name: "马尔代夫",
						url: "https://636c-cloud1-9g758w5e086d6c42-1308394358.tcb.qcloud.la/card/carshouye/02.png?sign=7c120fb70a15ada43db3b8f30f121db9&t=1637725999"

					}
				],
			}
		},
		methods: {
			jumprecommend: function() {
				uni.navigateTo({
					url:"/pages/Tourist/Tourist"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		margin: 20rpx 0;
		width: 750rpx;
		height: auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search-img {
		width: 60rpx;
		height: 60rpx;
	}

	.search-box {
		display: flex;
		align-items: center;
		width:650rpx;
		border-radius: 40rpx;
		height: 80rpx;
		background-color: #f7f7f7;
	}

	.search-ipt {
		padding-left: 20rpx;
		width: 620rpx;
		height: 60rpx;
	}

	.load-box {
		width: 750rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		

		.load-list {
			width: 750rpx;
			height: 100rpx;
			display: flex;
			background-color: #FFFFFF;
			justify-content: space-around;

			.load-list-item {
				width: 150rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				border-bottom: 10rpx solid #FFFFFF
			}

			.on {
				color: #3e64ff;
				border-bottom: 10rpx solid #3e64ff;
			}
		}

		.load-show {
			display: flex;
			width: 750rpx;
			margin-top: 20rpx;

			.title {
				color: #3e64ff;
				margin: 20rpx 0;
				font-size: 50rpx;
				border-bottom: 5rpx solid #3e64ff;

			}
		}
	}
</style>
